<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>6.4jQuery基础-实战案例之轮播图</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<style>
  ul,li{
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .m-slide{
    width: 100%;
    height: 300px;
    border: 1px solid red;
    overflow: hidden;
    position: relative;
  }
  .m-slide-image{
    display: flex;
    width: 400%;
    height: 300px;
    margin-left: 0%;
  }
  .m-slide-image li{
    flex: 1;
  }
  .m-slide-dot{
    height: 44px;
    bottom: 10px;
    right: 14px;
    position: absolute;
    display: flex;
  }
  .m-slide-dot li{
    width: 44px;
    height: 44px;
    border-radius: 22px;
    margin-left: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #cccccc;
    cursor: pointer;
  }
  li.m-slide-dot-selected{
    background: #ffe121;
  }
</style>
</head>
<body>
<!--
  第一步：
    先拿到节点元素
  第二步：
    1. 复制内容元素节点一复制到最后
    2. 重新设置一下内容元素的一个宽度
    等于我们的ul li个数*100%
    .m-slide-image.width=count(li)*100%
  第三步：
    通过操作的点，动态修改.m-slide-image
    的margin-left值
    0%->-1*100%->-2*200%
    相当于等于-index(dot)*100%
  第四步：
    定时地去修改margin-left的值
    比如：我们3s切换一次
    第3s->-100%
    第6s->-200%
    第9s->-300%
    第12s->-400%
    -(i+1)*3*100%
    当i%4==0 i=0

-->
<div id="slide1" class="m-slide">
  <ul class="m-slide-image">
    <li style="background:#ff9900">图片1</li>
    <li style="background:#ff6677">图片2</li>
    <li style="background:#ee8899">图片3</li>
    <li style="background:#aa9988">图片4</li>
  </ul>
  <ul class="m-slide-dot">
    <li class="m-slide-dot-selected">1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>
</div>
  <script>
    /**
    * 定义一个轮播图函数
    * @param selectorName 选择器
    **/
   function slide(selectorName) {
    // 根元素
    var mSlideDom = $(selectorName)
    // 内容的父级元素，可通过marginLeft
    var mSlideImageDom = mSlideDom.find(".m-slide-image")
    // 获取所有轮播的li
    var mSlideImageLiDomList = mSlideImageDom.find("li")
    // 拿操作的dot
    var mSlideDotDom = mSlideDom.find(".m-slide-dot")
    // 获取操作的dot-li
    var mSlideDotLiDomList = mSlideDotDom.find("li")
    // 复制节点1
    var firstLiClone = mSlideImageLiDomList.eq(0).clone()
    // 把节点一插入到最后
    mSlideImageDom.append(firstLiClone)
    // 重新获取一次轮播的li
    mSlideImageLiDomList = mSlideImageDom.find("li")
    // 获取image-li的个数
    var liLen = mSlideImageLiDomList.length
    mSlideImageDom.width(liLen*100+'%')
    var dotIndex = 0;
    /**
     * 处理样式
     * @param index 当前索引值
     * */
    function handleStyle(index){
      // 动态修改.m-slide-image的margin-left值
      // mSlideImageDom.style.marginLeft = -index*100+'%'
      //console.log($(mSlideImageDom))
      $(mSlideImageDom).animate({
        marginLeft: -index*100+'%'
      },800)
        // 动态修改dot-li的背景颜色
        for(var j=0;j<mSlideDotLiDomList.length;j++) {
          if(index == j) {
            mSlideDotLiDomList.eq(j).attr('class','m-slide-dot-selected')
          } else {
            mSlideDotLiDomList.eq(j).attr('class','')
          }
        }
    }
    // 给所有dot-li追加点击事件
    // for(var i=0;i<mSlideDotLiDomList.length;i++) {
    //   // 获取第i个dot-li
    //   var mSlideDotLiDom = mSlideDotLiDomList[i]
    //   // 给dot-li绑定一个索引值
    //   mSlideDotLiDom.index = i
    //   // 给dot-li追加点击事件
    //   mSlideDotLiDom.onclick=function() {
    //     //console.log(this.index)
    //     dotIndex = this.index
    //     handleStyle(this.index)
    //   }
    // }
    mSlideDotLiDomList.click(function(){
      // 获取当前点中元素的索引
      dotIndex = $(this).index()
      handleStyle(dotIndex)
    })
    // 定时器，每3s钟执行一次
    setInterval(function(){
      // 处理样式-与点击事件一样
      handleStyle(dotIndex)
      // 索引值自过
      dotIndex=dotIndex+1
      // 判断是否完成一个周期
      if(dotIndex==mSlideDotLiDomList.length) {
        // 重置索引
        dotIndex = 0
      }
    }, 2000);
    //console.log(liLen)
    //console.log(mSlideImageDom)
    //console.log(mSlideDotDom)
   }
   // 文档加载完成后执行
   $(document).ready(function(){
    slide("#slide1")
   })
    
  </script>

</body>
</html>